<template>
  <div class="control" v-if="food">
    <span class="add" @click.stop.prevent="addCart"><i class="iconfont icon-add"></i></span>
    <span class="num" v-show="food.count>0" >{{food.count}}</span>
    <span class="desc" v-show="food.count>0" @click.stop.prevent="decreaseCart"><i class="iconfont icon-jian"></i></span>
  </div>
</template>

<script>
import Vue from 'vue';
export default {
  name: 'shopControl',
  components: {},
  props: {
    food: Object,
  },
  data() {
    return {
      
    }
  },
  methods: {
    addCart(event) {
      if (!this.food.count) {
        Vue.set(this.food, 'count', 1);
        this.$store.commit("addGoods",this.food)
      } else {
        this.food.count++;
        this.changeNumber(this.food)
      }
      this.$emit('cartAdd', event.target);
      
    },
    decreaseCart() {
      this.food.count--;
      if(this.food.count == 0 ){
        this.$store.commit("deleteGoods",this.food)
      }else{
        this.changeNumber(this.food)
      } 
    },
    changeNumber(thisfood){
      let count=this.food.count;
        this.$store.commit("updateGoods",{
          id:thisfood.id,
          key:"count",
          value:count<=0 ? 1 : count,
          food:thisfood
      })
    }
  }
} 
</script>

<style lang="stylus" scoped>
@import "~styles/common.styl"
  .control
    width 1.4rem
    height 0.44rem
    font-size 0
    span
      float right
      width 0.44rem
      height 0.44rem
      text-align center
      line-height 0.44rem
      font-size 0.3rem
      box-sizing border-box
      border-radius 0.22rem
      color #333
      &.desc
        border 0.02rem solid #999
        i
          font-size 0.26rem
          font-weight bold
          color #999
      &.add
        background $themeColor
        vertical-align top
        i
          font-size 0.26rem
          font-weight bold
          color #fff
      &.num
        margin 0 0.03rem
</style>